<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 32px">我的项目</span>
                <el-button
                        style="float: right;"
                        v-if="userButtonIds.indexOf('project.store.add') != -1"
                        type="primary"
                        icon="el-icon-plus"
                        @click="addProjectButton"
                        size="small">新建项目
                </el-button>
            </div>


            <el-table
                    :data="projects"
                    border
                    size="small"
                    :header-cell-style="tableHeaderStyle"
                    style="width: 100%">
                <el-table-column
                        fixed
                        type="index"
                        label="No."
                        align="center"
                        header-align="center"
                        width="50">
                    <template slot-scope="scope">
                        {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="proCode"
                        label="项目编号"
                        align="center"
                        header-align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="proName"
                        align="center"
                        header-align="center"
                        :show-overflow-tooltip="true"
                        label="项目名称"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        header-align="center"
                        label="项目周期"
                        min-width="100">
                    <template slot-scope="scope">
                        {{scope.row.proStartDay}} ~ {{scope.row.proEndday}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        align="center"
                        header-align="center"
                        label="项目状态"
                        min-width="60">
                    <template slot-scope="scope">
                        {{projectStatusConstant[Number(scope.row.status)-1]}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="left"
                        header-align="center"
                        label="项目当前进度"
                min-width="100">
                    <template slot-scope="scope">
                        <el-progress :percentage="Number(scope.row.progress)"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        header-align="center"
                        width="150">
                    <template slot-scope="scope">
                        <div>
                            <el-button
                                    type="text"
                                    @click="getProjectInfo(scope.row.proId,scope.row.proCode)"
                                    size="small">查看
                            </el-button>
                            <el-button
                                    type="text"
                                    v-if="Number(scope.row.status) == 1"
                                    @click="editProjectInfo(scope.row.proId)"
                                    size="small">编辑
                            </el-button>
                            <el-button
                                    type="text"
                                    v-if="Number(scope.row.status) == 1"
                                    @click="deleteProject(scope.row.proId)"
                                    size="small">删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页-->
            <div style="text-align:right;margin-top: 20px">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="page.pageSize"
                        @current-change="changePageCurrent"
                        :total="page.pageCount">
                </el-pagination>
            </div>

        </el-card>

    </div>
</template>

<script>
import { projectStatusConstant, tableHeaderStyle } from '@/utils/constant'
import {http_project_list,
        http_deleted_project} from '@/api/project'
import { Message } from 'element-ui'

export default {
    data(){
        return{
            tableHeaderStyle,
            projectStatusConstant,
            userButtonIds: JSON.parse(localStorage.getItem("user")).buttonIds,
            projects:[],
            page: {
                pageNum: null,
                pageSize: null,
                pageCount: null,
            },
        }
    },
    created() {
        this.http_list()
    },
    methods:{
        http_list(){
            http_project_list(this.page).then(result=>{
                const {success,data} = result
                if (success){
                    this.projects = data.records
                    this.page = {
                        pageNum: data.current,
                        pageSize: data.size,
                        pageCount: data.total,
                    }
                }
            })
        },
        http_delete(id){
            http_deleted_project(id).then(result=>{
                const {success,message} = result
                if (success){
                    Message.success("删除成功")
                    this.http_list()
                }else {
                    Message.error("删除失败")
                }
            }).catch(error=>{
                Message.error("删除失败")
            })
        },
        deleteProject(id){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.http_delete(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        changePageCurrent(pageNum){
            this.page.pageNum = pageNum
            this.http_list()
        },
        addProjectButton(){
            this.$router.push("/createProject")
        },
        getProjectInfo(proId,proCode){
            this.$router.push({path:'/distributionProject?id='+proId + `&proNo=`+proCode})
        },
        editProjectInfo(proId){
            this.$router.push({path:'/createProject/'+proId})
        }
    },
}
</script>

<style lang="less" scoped>
    /deep/.el-progress-bar{
        width: 95%;
    }
</style>
